<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>浮动-清除浮动</title>
<meta name="author" content="phpstudy.net" />
<meta name="copyright" content="www.phpstudy.net" />
<style>
.test{float:right;background:#eee;}
.test2{
	clear:right;
	background:#bbb;
	}
.a0{
	background: lavender;
}	
.a1{
	font-size: 22px;
	height: 50px;
	line-height: 50px;
}
.a2{
	height: 70px;
	line-height: 70px;
	font-size: 24px;
}
.a3{
	background: greenyellow;
	/*float: right;*/
	position: absolute;
	top: 100px;
}
.clear{
	clear: both;
}
.b0{
	height: 80px;
	background: orange;
	line-height: 80px;
	float: left;
}
</style>
</head>
<body>
<div class="test">我将出现在屏幕右方</div>
<div class="test2 clear">注意我出现的位置</div>
<div class="a0">
	<div class="test a1">
		第一个
	</div><br /><hr />
	<div class="test a2">
		第二个
	</div>
	<div class="a3">
		第三个
	</div>
	<div class="clear">
		
	</div>
</div>
<div class="b0">
	2号盒子
</div><hr />
</body>
</html>